<!DOCtype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>vue_010_循环结构</title>
</head>
<body>
    <div id="app">
        <!-- key的作用：帮助vue区分不同的元素，从而提高性能，key值要唯一 -->
        <div>没有index的水果列表</div>
        <li v-for="item in fruits">{{item}}</li>
        <div>有index的水果列表</div>
        <li :key="index" v-for="(item,index) in fruits">{{item + "----------" + index}}</li>
        <div>水果列表</div>
        <li v-for="item in fruits1">{{item.englishName + "----------" + item.chineseName}}</li>
    </div>
    <script src="js/vue.js"></script>
    <script type="text/javascript">

        var vm = new Vue({
            el:'#app',
            data:{
               fruits:["apple","banana","orange"],
               fruits1:[
                   {
                       englishName:"apple",
                       chineseName:"苹果"
                   },
                   {
                       englishName:"banana",
                       chineseName:"香蕉"
                   },
                   {
                       englishName:"orange",
                       chineseName:"橘子"
                    }
                ]
            }
        });

    </script>
</body>

</html></SCRIPT>